<template>
  <div class="contact">
    <div class="container py-5">
      <!-- 页面标题 -->
      <div class="row mb-5">
        <div class="col-12 text-center">
          <h1 class="display-4 fw-bold text-primary mb-3">联系我</h1>
          <p class="lead text-muted">
            有任何问题或想法？欢迎与我交流！
          </p>
        </div>
      </div>

      <div class="row">
        <!-- 联系表单 -->
        <div class="col-lg-8 mb-5">
          <div class="card border-0 shadow-lg">
            <div class="card-body p-5">
              <h3 class="mb-4">发送消息</h3>
              <form @submit.prevent="submitForm" novalidate>
                <div class="row mb-3">
                  <div class="col-md-6">
                    <label for="name" class="form-label">姓名 *</label>
                    <input 
                      type="text" 
                      class="form-control" 
                      :class="{ 'is-invalid': errors.name }"
                      id="name" 
                      v-model="form.name"
                      required
                    >
                    <div v-if="errors.name" class="invalid-feedback">
                      {{ errors.name }}
                    </div>
                  </div>
                  <div class="col-md-6">
                    <label for="email" class="form-label">邮箱 *</label>
                    <input 
                      type="email" 
                      class="form-control"
                      :class="{ 'is-invalid': errors.email }"
                      id="email" 
                      v-model="form.email"
                      required
                    >
                    <div v-if="errors.email" class="invalid-feedback">
                      {{ errors.email }}
                    </div>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="subject" class="form-label">主题 *</label>
                  <input 
                    type="text" 
                    class="form-control"
                    :class="{ 'is-invalid': errors.subject }"
                    id="subject" 
                    v-model="form.subject"
                    required
                  >
                  <div v-if="errors.subject" class="invalid-feedback">
                    {{ errors.subject }}
                  </div>
                </div>
                <div class="mb-3">
                  <label for="category" class="form-label">分类</label>
                  <select class="form-select" id="category" v-model="form.category">
                    <option value="">选择分类</option>
                    <option value="技术咨询">技术咨询</option>
                    <option value="合作意向">合作意向</option>
                    <option value="友情链接">友情链接</option>
                    <option value="建议反馈">建议反馈</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                <div class="mb-4">
                  <label for="message" class="form-label">消息内容 *</label>
                  <textarea 
                    class="form-control" 
                    :class="{ 'is-invalid': errors.message }"
                    id="message" 
                    rows="6" 
                    v-model="form.message"
                    required
                  ></textarea>
                  <div v-if="errors.message" class="invalid-feedback">
                    {{ errors.message }}
                  </div>
                </div>
                <div class="d-grid">
                  <button 
                    type="submit" 
                    class="btn btn-primary btn-lg"
                    :disabled="isSubmitting"
                  >
                    <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
                    <i v-else class="bi bi-send me-2"></i>
                    {{ isSubmitting ? '发送中...' : '发送消息' }}
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="col-lg-4">
          <div class="sticky-top" style="top: 2rem;">
            <!-- 联系方式 -->
            <div class="card border-0 shadow-sm mb-4">
              <div class="card-body p-4">
                <h5 class="card-title text-primary mb-4">
                  <i class="bi bi-person-lines-fill me-2"></i>联系方式
                </h5>
                <div class="contact-item mb-3">
                  <i class="bi bi-envelope text-primary me-3"></i>
                  <div>
                    <div class="fw-semibold">邮箱</div>
                    <a href="mailto:your-email@example.com" class="text-muted text-decoration-none">
                      495102569@qq.com
                    </a>
                  </div>
                </div>
                <div class="contact-item mb-3">
                  <i class="bi bi-geo-alt text-primary me-3"></i>
                  <div>
                    <div class="fw-semibold">位置</div>
                    <span class="text-muted">中国，某个美丽的城市</span>
                  </div>
                </div>
                <div class="contact-item mb-3">
                  <i class="bi bi-clock text-primary me-3"></i>
                  <div>
                    <div class="fw-semibold">响应时间</div>
                    <span class="text-muted">通常在24小时内回复</span>
                  </div>
                </div>
              </div>
            </div>

            <!-- 社交媒体 -->
            <div class="card border-0 shadow-sm mb-4">
              <div class="card-body p-4">
                <h5 class="card-title text-primary mb-4">
                  <i class="bi bi-share me-2"></i>社交媒体
                </h5>
                <div class="d-flex flex-wrap gap-3">
                  <a href="#" class="btn btn-outline-primary flex-fill text-center">
                    <i class="bi bi-github"></i>
                    <div class="small mt-1">GitHub</div>
                  </a>
                  <a href="#" class="btn btn-outline-info flex-fill text-center">
                    <i class="bi bi-linkedin"></i>
                    <div class="small mt-1">LinkedIn</div>
                  </a>
                  <a href="#" class="btn btn-outline-success flex-fill text-center">
                    <i class="bi bi-wechat"></i>
                    <div class="small mt-1">微信</div>
                  </a>
                  <a href="#" class="btn btn-outline-danger flex-fill text-center">
                    <i class="bi bi-youtube"></i>
                    <div class="small mt-1">YouTube</div>
                  </a>
                </div>
              </div>
            </div>

            <!-- 常见问题 -->
            <div class="card border-0 shadow-sm">
              <div class="card-body p-4">
                <h5 class="card-title text-primary mb-4">
                  <i class="bi bi-question-circle me-2"></i>常见问题
                </h5>
                <div class="faq-item mb-3">
                  <h6 class="fw-semibold mb-2">多久能收到回复？</h6>
                  <p class="text-muted small mb-0">
                    我通常会在24小时内回复所有邮件，紧急事务会更快处理。
                  </p>
                </div>
                <div class="faq-item mb-3">
                  <h6 class="fw-semibold mb-2">可以合作吗？</h6>
                  <p class="text-muted small mb-0">
                    当然！我很乐意讨论技术合作、项目开发等机会。
                  </p>
                </div>
                <div class="faq-item">
                  <h6 class="fw-semibold mb-2">提供技术咨询吗？</h6>
                  <p class="text-muted small mb-0">
                    是的，我可以提供前端开发、Vue.js等方面的技术咨询。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 成功提示模态框 -->
      <div class="modal fade" id="successModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body text-center p-5">
              <div class="mb-4">
                <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
              </div>
              <h4 class="mb-3">消息发送成功！</h4>
              <p class="text-muted mb-4">
                感谢您的消息！我会尽快回复您。
              </p>
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        category: '',
        message: ''
      },
      errors: {},
      isSubmitting: false
    }
  },
  methods: {
    validateForm() {
      this.errors = {}
      
      if (!this.form.name.trim()) {
        this.errors.name = '请输入您的姓名'
      }
      
      if (!this.form.email.trim()) {
        this.errors.email = '请输入邮箱地址'
      } else if (!this.isValidEmail(this.form.email)) {
        this.errors.email = '请输入有效的邮箱地址'
      }
      
      if (!this.form.subject.trim()) {
        this.errors.subject = '请输入消息主题'
      }
      
      if (!this.form.message.trim()) {
        this.errors.message = '请输入消息内容'
      } else if (this.form.message.length < 10) {
        this.errors.message = '消息内容至少需要10个字符'
      }
      
      return Object.keys(this.errors).length === 0
    },
    
    isValidEmail(email) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(email)
    },
    
    async submitForm() {
      if (!this.validateForm()) {
        return
      }
      
      this.isSubmitting = true
      
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        // 显示成功模态框
        const { Modal } = await import('bootstrap')
        const modal = new Modal(document.getElementById('successModal'))
        modal.show()
        
        // 重置表单
        this.form = {
          name: '',
          email: '',
          subject: '',
          category: '',
          message: ''
        }
        
      } catch (error) {
        alert('发送失败，请稍后重试')
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped>
.contact-item {
  display: flex;
  align-items: flex-start;
}

.contact-item i {
  margin-top: 0.25rem;
  width: 1.5rem;
}

.faq-item {
  border-left: 3px solid #e9ecef;
  padding-left: 1rem;
}

.faq-item:hover {
  border-left-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.05);
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.85) !important;
}

@media (max-width: 768px) {
  .sticky-top {
    position: static !important;
    margin-top: 2rem;
  }
  
  .d-flex.gap-3 .btn {
    min-width: calc(50% - 0.75rem);
  }
}
</style>
